<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

// 响应式登录状态
const isLoggedIn = ref(false)
const route = useRoute()

// 检查登录状态
const checkLoginStatus = () => {
  const status = localStorage.getItem('isLoggedIn') === 'true'
  isLoggedIn.value = status
  console.log('登录状态:', status)
}

// 初始检查
checkLoginStatus()

// 监听路由变化
watch(() => route.path, () => {
  checkLoginStatus()
})

// 监听存储变化
window.addEventListener('storage', (e) => {
  if (e.key === 'isLoggedIn') {
    checkLoginStatus()
  }
})

// 组件卸载时移除监听
onMounted(() => {
  return () => {
    window.removeEventListener('storage', checkLoginStatus)
  }
})
</script>

<template>
  <div class="app-container">
    <!-- 根据登录状态决定是否显示侧边栏 -->
    <template v-if="isLoggedIn">
      <aside class="sidebar">
        <div class="logo-container">
          <h1>科室文件存储系统</h1>
        </div>
        <nav>
          <RouterLink to="/home" class="nav-item" active-class="active">首页</RouterLink>
          <RouterLink to="/department/1" class="nav-item" active-class="active">大气办</RouterLink>
          <RouterLink to="/department/2" class="nav-item" active-class="active">规划科</RouterLink>
          <RouterLink to="/department/3" class="nav-item" active-class="active">协调科</RouterLink>
          <RouterLink to="/department/4" class="nav-item" active-class="active">办公室</RouterLink>
          <RouterLink to="/department/5" class="nav-item" active-class="active">建设科</RouterLink>
          <RouterLink to="/department/6" class="nav-item" active-class="active">财务科</RouterLink>
          <RouterLink to="/about" class="nav-item" active-class="active">关于系统</RouterLink>
        </nav>
      </aside>

      <main>
        <RouterView />
      </main>
    </template>

    <!-- 未登录时只显示路由视图 -->
    <template v-else>
      <div class="full-screen-view">
        <RouterView />
      </div>
    </template>
  </div>
</template>

<style scoped>
.app-container {
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
}

.full-screen-view {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
}

.sidebar {
  width: 250px;
  background-color: #42b983;
  color: white;
  display: flex;
  flex-direction: column;
}

.logo-container {
  padding: 1.5rem;
  border-bottom: 2px solid rgba(29, 28, 28, 0.12);
  margin: 0 auto;
}

.logo-container h1 {
  margin: 0;
  font-size: 1.4rem;
  text-align: center;
}

nav {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 20px;
}

.nav-item {
  color: white;
  text-decoration: none;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  transition: background-color 0.3s;
  display: block;
  text-align: center;
}

.nav-item.active {
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: bold;
}

nav a:hover,
nav a.router-link-exact-active {
  background-color: rgba(255, 255, 255, 0.2);
}

main {
  flex: 1;
  padding: 2rem;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>
